<template>
	<view class="coupon">
		<view class="coupon-tabs">
			<u-tabs :list="list"  :is-scroll="false" :current="current" @change="change" active-color="#D1AA56"></u-tabs>
		</view>
		<view class="content">
				<view class="item-box" v-for="(item,index) in coupons_list" :key="index">
					<image src="../../../static/coupon-1.png" mode="widthFix"></image>
					<view class="coupon-item">
						<view class="left">
							<text>¥{{item.coupon_money}}</text>
							<text>无门槛优惠券</text>
						</view>
						<view class="center">
							<text>{{item.coupon_title}}</text>
							<text>所有商品类型</text>
							<text>有效期到{{item.coupon_end_time}}</text>
						</view>
						<button class="small-btn" @click="goHome" v-if="mode == 1">去使用</button>
						<button class="small-btn" @click="goPage(item.coupons_id,item.coupon_money,item.coupon_title)" v-else>去使用</button>
					</view>
				</view>
			</swiper>
		</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				coupons_list:[],
				current: 0,
				tabsId:0,
				list: [
					{
						name:'未使用'
					},
					{
						name:'已使用'
					},
					{
						name:'已过期'
					}
				],
				type:1, //1未使用，2已使用，3已过期
				page:1,
				mode:1,
				goodsIndex:0,
				goodsNum:0,
				
			};
		},
		created(){
			this.getCouponList()
		},
		onLoad(option) {
			if(option.mode == ''&&option.mode == null&&option.mode == undefined){
				// this.mode = 1
				console.log(option)
			}else{
				this.mode = option.mode
				this.goodsIndex = option.goodsIndex
				this.goodsNum = option.goodsNum
			}
		},
		onReachBottom() {
			this.page ++
			this.getCouponList()
		},
		methods:{
			goHome(){
				uni.switchTab({
					url:'../../home/home'
				})
			},
			// 去使用操作
			goPage(id,price,title){
				if (this.mode == 1) {
					uni.switchTab({
						url:'../../home/home'
					})
				} else{
					uni.redirectTo({
						url:'../../common/shop/goodsDetail/submitOrder/submitOrder?coupon_id='+ id + '&coupon_price=' + price + '&goodsIndex=' + this.goodsIndex + '&goodsNum=' + this.goodsNum + '&coupon_title=' + title
					})
				}
			},
			// tabs切换
			change(index) {
				if (index == 0) {
					this.type = 1
				} else if(index == 1){
					this.type = 2
				}else{
					this.type = 3
				}
				this.page = 1
				this.coupons_list = []
				this.getCouponList()
				this.current = index;

			},
			// 使用优惠券
			onUse(){
				uni.navigateTo({
					url:'../../common/shop/goodsDetail/submitOrder/submitOrder'
				})
			},
			//请求优惠券
			getCouponList(){
				uni.request({
				    url:this.$Url +'/index.php/App/Users/couponList',
				    method:'POST',
				    data:{
				       type:this.type,
					   p:this.page
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if (res.data.status == 200) {
							this.coupons_list = this.coupons_list.concat(res.data.data.users_coupons_list)
						} else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
						}
				    }
				})
			}
		}
	}
</script>

<style lang="scss">
.coupon{
	width: 100vw;
	min-height: 100vh;
	background-color: #f7f7f7;
	swiper{
		min-height: 100vh;
	}
	.coupon-tabs{
		background-color: #fff;
		padding-top: 10upx;
		padding-bottom: 10upx;
		position: fixed;
		width: 100%;
	}
	.content{
		padding-top: 100upx;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		.item-box{
			width: 690upx;
			height: 190upx;
			position: relative;
			margin-top: 15upx;
			image{
				width: 690upx;
				height: 190upx;
			}
			.colorHui{
				.left,.center{
					text{
						color: #a9a9a9 !important;
					}
				}
			}
			.coupon-item{
				position: absolute;
				top: 0;
				left: 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 680upx;
				height: 190upx;
				.left{
					width: 180upx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding-left: 14upx;
					color: #dbb869;
					text:first-child{
						font-size: 24upx;
						font-weight: 600;
					}
					text:last-child{
						font-size: 18upx;
					}
				}
				.center{
					width: 290upx;
					display: flex;
					color: #999;
					flex-direction: column;
					padding-left: 40upx;
					text:first-child{
						color: #333;
						font-size: 30upx;
						font-weight: 600;
						margin-bottom: 10upx;
					}
					text:nth-child(2){
						font-size: 22upx;
						margin-bottom: 10upx;
					}
					text:last-child{
						font-size: 22upx;
					}
				}
				.hui{
					background-color: #a9a9a9;
					color: #fff;
				}
			}
		}
	}

}
</style>
